<template xmlns="">
    <a-card title="设备管理" :bordered="false">
        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item class="width150">
                    <a-input v-model="searchForm.code"
                             :allowClear="$store.getters.allowClear"
                             placeholder="设备代码"></a-input>
                </a-form-model-item>


                <a-form-model-item>
                    <a-select placeholder="所属场地" allowClear style="width: 150px"
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.placeCode">
                        <a-select-option v-for="(item, index) in PlaceOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item>
                    <a-select placeholder="部署状态" allowClear style="width: 150px"
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.deployStatus">
                        <a-select-option v-for="(item, index) in DeployStatusOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item>
                    <a-button type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="danger" @click="openEdit()">新建</a-button>
                </a-form-model-item>

                <a-form-model-item>

                    <a-popconfirm title="确定要刷新监听的设备列表吗" @confirm="() =>refreshListen()">
                        <a-button class="btn-success">刷新列表</a-button>
                    </a-popconfirm>

                </a-form-model-item>
            </a-form-model>
        </template>
        <div class="mainBox">

            <a-row :gutter="16">
                <a-col :span="4">
                    <a-card size="small" title="设备总量" :bordered="false">
                        <h1 class="count">{{countPanel.total}}台</h1>
                    </a-card>
                </a-col>

                <a-col :span="4">
                    <a-card size="small" title="安装部署" :bordered="false">
                        <h1 class="count">{{countPanel.deployTotal }}台</h1>
                    </a-card>
                </a-col>
                <a-col :span="4">
                    <a-card size="small" title="在线设备" :bordered="false">
                        <h1 class="count"> {{countPanel.onLineTotal}}台 </h1>
                    </a-card>
                </a-col>

                <a-col :span="4">
                    <a-card size="small" title="离线设备" :bordered="false">
                        <a slot="extra" href="#" @click="offLineShow=true">查看所有</a>
                        <h1 class="count">{{countPanel.offLineTotal}}台</h1>

                    </a-card>
                </a-col>

                <a-col :span="4">
                    <a-card size="small" title="尚未部署" :bordered="false">
                        <h1 class="count">{{countPanel.notDeployTotal }}台 </h1>
                    </a-card>
                </a-col>
                <a-col :span="4">
                    <a-card size="small" title="更新时间" :bordered="false">
                        <h1 class="count">{{countPanel.countTime}}</h1>
                    </a-card>
                </a-col>
            </a-row>
        </div>

        <div class="mainBox">
            <a-list :grid="{ gutter:12, column: 6 }"
                    :pagination="pagination"
                    :data-source="dataSource">
                <a-list-item slot="renderItem" slot-scope="item, index" :bordered="false">
                    <a-card :hoverable="true" :bordered="false">
                        <a slot="title" class="status">
                            <a-icon type="video-camera"/>
                            <span v-html="deviceONLineStatus(item)" style="margin-left: 10px"/>
                        </a>
                        <a-dropdown slot="extra">
                            <a class="ant-dropdown-link text-grey" @click="e => e.preventDefault()">
                                管理
                                <a-icon type="down"/>
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item>
                                    <a @click="openEdit(item)">设备编辑</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a @click="openEdit(item)">日志查看</a>
                                </a-menu-item>
                                <a-menu-divider/>
                                <a-menu-item>
                                    <a-popconfirm :title="`确定要删除【 ${item.code} 】这个设备吗?`"
                                                  @confirm="() => delDevice(item)">
                                        <a>删除设备</a>
                                    </a-popconfirm>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                        <a-card-meta :title="fmtDeviceTitle(item)" :description="item.code"/>
                    </a-card>
                </a-list-item>
            </a-list>
        </div>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>

        <OffLineModal :dataId="dataId" v-if="offLineShow" :offLineList="offLineList"
                      @closeFun="(e)=>{ offLineShow=false}"/>
    </a-card>
</template>
<script>
    import {
        pagination
    } from '../public/colums.js';
    import {
        deviceList,
        deviceDelete,

        deviceRefreshListen
    } from '../public/http.js';
    import {PlaceDict} from '../public/internal'
    import {dictLoad} from "../../../util/internal.api";

    export default {
        components: {
            EditBox: () => import('./edit.vue'),
            OffLineModal: () => import('./off_line')
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录

                dataId: 0,
                offLineShow: false,


                countPanel: {}, //统计面板数据
                offLineList: this.$store.state.deviceOffLine, //离线设备列表


                dataSource: [],
                pagination: {
                    ...pagination,
                    pageSize: 18,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getTableList();
                    }
                },
                loading: false, //表格loading
                searchForm: {},
                PlaceOPT: [],
                DeployStatusOPT: [],
            };
        },
        methods: {


            refreshListen() {
                deviceRefreshListen().then(res => {
                    this.$exMod.ajaxMessage(res);
                })
            },


            deviceONLineStatus(record) {
                if (record.deployStatus === "F") {
                    return "未知";
                }

                const x = this.offLineList.find(item => item.deviceCode === record.code);
                if (x) {
                    return "<span class='text-danger'>离线" + x.offLineDuration + "分钟 </span>";
                } else {
                    return "<span class='text-success'>在线</span>";

                }

            },


            fmtDeviceTitle(record) {
                if (record.deployStatus === "F") {
                    return "未安装";
                } else {
                    return this.$exMod.findDict(this.PlaceOPT, record.placeCode);
                }
            },
            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                deviceList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                        this.$store.commit("setDeviceCountPanel", res.data.countPanel);

                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除设备
            delDevice(record) {
                this.loading = true;
                deviceDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {
                await PlaceDict().then(res => this.PlaceOPT = res);
                await dictLoad("DeployStatus").then(res => this.DeployStatusOPT = res);
                await this.getTableList();
            }
        },


        watch: {
            '$store.state.deviceCountPanel'(curVal, oldVal) {
                this.countPanel = curVal;
            },


            // 监听 store里面的数据
            "$store.state.deviceOffLine": {
                deep: true,
                handler: function (newValue, oldValue) {
                    this.dataId++;
                    this.offLineList = newValue
                }
            }


        },

        created() {
            this.init();
        }
    };
</script>
<style scoped>
    .mainBox {
        padding: 10px;
        background: #EEEEEE;
    }

    .status {
        font-size: 14px;
        color: #666666;
    }

    .count {
        text-align: center;
        font-size: 32px;
        font-weight: 600;
    }

    .count > small {
        padding: 4px;
        float: right;
        font-size: 12px;
        color: #666666;
        font-weight: normal;
        clear: both;
        bottom: 10px;
        position: absolute;
    }


</style>
